@mixin clearfix {
	&:after {
		content: '';
		display: table;
		clear: both;
	}
}

@mixin scrollBar {
	&::-webkit-scrollbar-track-piece {
		background: #d3dce6;
	}
	&::-webkit-scrollbar {
		width: 6px;
	}
	&::-webkit-scrollbar-thumb {
		background: #99a9bf;
		border-radius: 20px;
	}
}

@mixin relative {
	position: relative;
	width: 100%;
	height: 100%;
}

@mixin pct($pct) {
	width: #{$pct};
	position: relative;
	margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
	$width: $width/2;
	$color-border-style: $height solid $color;
	$transparent-border-style: $width solid transparent;
	height: 0;
	width: 0;
	@if $direction==up {
		border-bottom: $color-border-style;
		border-left: $transparent-border-style;
		border-right: $transparent-border-style;
	} @else if $direction==right {
		border-left: $color-border-style;
		border-top: $transparent-border-style;
		border-bottom: $transparent-border-style;
	} @else if $direction==down {
		border-top: $color-border-style;
		border-left: $transparent-border-style;
		border-right: $transparent-border-style;
	} @else if $direction==left {
		border-right: $color-border-style;
		border-top: $transparent-border-style;
		border-bottom: $transparent-border-style;
	}
}

// prefixCss3 给属性加前缀
// 说明：处理css3属性前缀问题（默认  box-sizing:border-box）
@mixin prefixCss3($property: box-sizing, $value: border-box, $prefixes: webkit moz ms o) {
	@each $prefix in $prefixes {
		@if $prefix==webkit {
			-webkit-#{ $property }: $value;
		} @else if $prefix==moz {
			-moz-#{ $property }: $value;
		} @else if $prefix==ms {
			-ms-#{ $property }: $value;
		} @else if $prefix==o {
			-o-#{ $property }: $value;
		}
	}
	#{ $property }: $value;
}

// flex布局处理
@mixin flex-box($justify: flex-start, $align: stretch, $direction: row, $wrap: nowrap) {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	// 设置子元素沿主轴对齐方式
	-webkit-box-pack: $justify;
	-webkit-justify-content: $justify;
	justify-content: $justify;
	// 设置子元素沿侧轴对齐方式
	-webkit-box-align: $align;
	-webkit-align-items: $align;
	align-items: $align;
	// 设置flex的主轴方向以及子元素对其方式
	-webkit-flex-direction: $direction;
	flex-direction: $direction;
	// 如果$direction设置了纵向排列！（兼容老版本的）
	@if $direction==column {
		-webkit-box-orient: vertical;
	} @else if $direction==row {
		-webkit-box-orient: horizontal;
	} @else {
		-webkit-box-direction: reverse;
	}
	// 设置flex子元素是否可以折行显示（默认是不折行显示）
	-webkit-flex-wrap: $wrap;
	flex-wrap: $wrap;
}

@mixin flex-item($number: 1, $width: 0%) {
	// 在旧版的规范中，使用比例伸缩布局时，子元素的内容长短不同会导致无法“等分”，这个时候，我们需要给子元素设置一个“width:0%”来解决问题。
	-webkit-box-flex: $number;
	-webkit-flex: $number;
	flex: $number;
}

//文字益处显示省略号
//  $line    控制文字为多少行   默认为1行
@mixin text-overflow($line: 1) {
	@if $line==1 {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap; //强制文字在一行中显示
	} @else {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		@include prefixCss3($property: line-clamp, $value: $line);
	}
}

// 设置背景图片
// 说明：设置背景图片
//      调用 @include set-bg-img( $name: "img.png" , $position: center , $size: cover , $repeat: no-repeat, $color: #fff )
@mixin set-bg-img($name, $position: center, $size: cover, $repeat: no-repeat, $color: transparent) {
	background: url($name) $position/$size $repeat $color;
}

//设置输入框placeholder颜色
@mixin fnPlaceholderColor($color) {
	&::-webkit-input-placeholder {
		color: $color;
	}
	&::-moz-input-placeholder {
		color: $color;
	}
	&::-ms-input-placeholder {
		color: $color;
	}
}

//当元素宽度使用百分比时，此方法可以使元素宽高保持一致(padding的百分比是根据宽度来计算的,默认100%);
@mixin fnAutoHeight($height: 100%) {
	&::before {
		content: '';
		display: inline-block;
		padding-bottom: $height;
	}
}

// prefixCss3 背景渐变
@mixin fnGradient($deg: 135deg, $start: rgba(0, 194, 130, 1) 0%, $end: rgba(0, 143, 75, 1) 100%) {
	background: -webkit-linear-gradient($deg, $start, $end);
	/* Safari 5.1 - 6.0 */
	background: -o-linear-gradient($deg, $start, $end);
	/* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient($deg, $start, $end);
	/* Firefox 3.6 - 15 */
	background: linear-gradient($deg, $start, $end);
	/* 标准的语法 */
}

// 超出滚动
@mixin fnScroll() {
	overflow: auto; /* winphone8和android4+ */
	-webkit-overflow-scrolling: touch; /* ios5+ */
	margin-right: -17px;
}
